import router from '@/router/index.js' // 导入路由
import nprogress from 'nprogress/nprogress.js' // 导入进度条效果
import 'nprogress/nprogress.css' // 导入进度条样式
import store from '@/store/index.js' // 导入token
import { asyncRoutes } from '@/router/index.js' // 引入动态路由

// 白名单
const whiteList = ['/login', '/404']
// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  nprogress.start()
  // 判断token是否存在
  if (store.getters.token) {
    // token存在的情况 - 判断是否去访问登录页，如果在有token的情况下去访问登录页，应该重定向到首页
    if (to.path === '/login') {
      // 跳转到主页
      next('/')
      nprogress.done() // next(有值) 路由后置守卫不会执行，所以需要关闭进度条
    } else {
      // 获取用户资料
      // 判断是否获取过用户信息 - 通过userId
      if (!store.getters.userId) {
        // 接收数据 - 用户信息中携带的
        const { roles } = await store.dispatch('user/getUserInfo')
        // 筛选数据 - 动态路由和用户信息中携带的角色匹配
        const filterRoutes = asyncRoutes.filter(item => {
          // 判断 roles.menus 中的值是否和 asyncRoutes 中的匹配，如果匹配则返回匹配到的路由
          return roles.menus.includes(item.menuName) // 返回筛选后的路由信息
        })
        // 更新Vuex中的路由状态数据, 使filterRoutes成为响应式数据
        store.commit('user/setRoutes', filterRoutes)
        // 使用router.addRoutes动态添加路由信息到路由表
        // 404路由必须放在所有路由的后面
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 路由转发 - 目的是让路由拥有信息
        next(to.path)
      } else {
        next() // 放行
      }
    }
  } else {
    // token不存在的情况 - 判断是否在白名单内，如果在白名单内就放行，如果不在白名单内就跳转到登录页
    if (whiteList.includes(to.path)) {
      next() // 放行
    } else {
      next('/login') // 跳转到登录页
      nprogress.done()
    }
  }
})

// 路由后置守卫
router.afterEach(() => {
  // 关闭进度条
  nprogress.done()
})
